<template>
  <div class="space-y-8">
    <div class="text-center space-y-4">
      <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-primary-500 dark:from-primary-400 dark:to-primary-300">
        优化您的图片
      </h1>
      <p class="text-xl text-dark-600 dark:text-dark-300">
        一个完全在浏览器中运行的强大图片优化工具
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300">
        <div class="w-12 h-12 bg-primary-100 dark:bg-primary-500/10 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-primary-500 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-dark-900 dark:text-dark-50 mb-2">格式转换</h3>
        <p class="text-dark-600 dark:text-dark-300">支持 JPG、PNG、WebP 等多种图片格式之间的转换</p>
      </div>

      <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300">
        <div class="w-12 h-12 bg-primary-100 dark:bg-primary-500/10 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-primary-500 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-dark-900 dark:text-dark-50 mb-2">智能优化</h3>
        <p class="text-dark-600 dark:text-dark-300">在保持图片质量的同时减小文件大小</p>
      </div>

      <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300">
        <div class="w-12 h-12 bg-primary-100 dark:bg-primary-500/10 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-primary-500 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-dark-900 dark:text-dark-50 mb-2">隐私优先</h3>
        <p class="text-dark-600 dark:text-dark-300">所有处理都在浏览器中完成，不会将数据发送到服务器</p>
      </div>
    </div>

    <div class="mt-12 text-center">
      <router-link 
        to="/optimize" 
        class="inline-flex items-center px-8 py-3 bg-primary-500 hover:bg-primary-600 dark:bg-primary-600 dark:hover:bg-primary-700 text-white rounded-lg shadow-sm hover:shadow transition-all duration-200"
      >
        <span>开始使用</span>
        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
        </svg>
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
// 无需任何脚本代码
</script> 